<template>
  <view class="news-card" :class="{ 'ad-card': isAd }" @click="$emit('click')">
    <view class="news-item">
      <!-- 图片区域（广告标签放在图片左下角） -->
      <view class="img-container" :class="{ 'ad-img-container': isAd }">
        <image 
          :src="isAd ? item.adImage : item.image" 
          mode="aspectFill" 
          class="news-img"
        ></image>
        <!-- 广告标签：左下角定位 -->
        <text class="ad-tag" v-if="isAd">广告</text>
      </view>
      
      <view class="news-content">
        <text class="news-title">{{ item.title }}</text>
        
        <view class="news-meta">
          <text class="top-tag" v-if="item.isTop && !isAd">置顶</text>
          <text class="source">{{ item.source }}</text>
          <text class="comment" v-if="!isAd">{{ item.comment }}评</text>
          <text class="time">{{ item.time }}</text>
          
          <view class="tags" v-if="item.tags && !isAd">
            <text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "NewsCard",
  props: {
    item: {
      type: Object,
      required: true
    },
    isAd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultImage: "https://via.placeholder.com/200x140?text=默认图",
      adDefaultImage: "https://via.placeholder.com/200x140?text=广告图"
    };
  }
};
</script>

<style scoped>
.news-card {
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  background-color: #fff;
  transition: background-color 0.2s;
}

.ad-card {
  background-color: #fff8f0;
}

/* 图片容器：用于定位广告标签 */
.img-container {
  position: relative; /* 相对定位，作为广告标签的父容器 */
  width: 200rpx;
  height: 140rpx;
  flex-shrink: 0;
}

.news-img {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

/* 广告标签：左下角定位 */
.ad-tag {
  position: absolute; /* 绝对定位，相对于图片容器 */
  left: 0; /* 左对齐 */
  bottom: 0; /* 底部对齐 */
  background-color: rgba(255, 125, 0, 0.9); /* 半透明橙色 */
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 0 8rpx 0 8rpx; /* 右上角圆角，与图片边角呼应 */
  z-index: 1; /* 确保在图片上方显示 */
}

/* 内容区域 */
.news-item {
  display: flex;
  gap: 20rpx;
  align-items: flex-start;
}

.news-content {
  flex: 1;
  min-width: 0;
}

.news-title {
  font-size: 32rpx;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  font-size: 24rpx;
  color: #888;
  align-items: center;
}

.top-tag {
  background-color: #ff3b30;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
}

.tags {
  display: flex;
  gap: 8rpx;
  margin-top: 8rpx;
}

.tag {
  font-size: 22rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
}


</style>